<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <el-form-item label="起始时间">
        <br /><br />
        <el-date-picker
          v-model="value4"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions2"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        style="margin-left:950px;text-align:right;margin-top:10px;margin-bottom:20px"
      >
        <el-button
          type="primary"
          @click="searchData()"
          size="mini"
          icon="el-icon-search"
          >查询</el-button
        >

        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >重置</el-button
        >

        <el-button
          type="success"
          @click="exportExcel()"
          size="mini"
          icon="el-icon-s-data"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      style="width: 100%;margin-bottom: 20px;"
      row-key="goodsTypeId"
      border
      v-loading="loading"
      default-expand-all
      @sort-change="handleSort"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="upOrgZone"
        label="大区名称"
        width="160"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="memberAmount"
        label="付费会员总人数（人）"
        align="center"
        width="200"
        sortable="memberAmount"
      >
        <template slot="header" slot-scope="scope">
          <span
            >付费会员总人数（人）
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="有付费的会员人数"
            >
              <el-button slot="reference" @click.stop style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="memberPayMoney"
        label="会员付款总金额（元）"
        width="200"
        align="center"
        sortable="memberPayMoney"
      >
        <template slot="header" slot-scope="scope">
          <span
            >会员付款总金额（元）
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="已支付订单金额（包含已退款订单金额）"
            >
              <el-button slot="reference" @click.stop style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="memberRefMoney"
        label="会员退款总金额"
        align="center"
        width="180"
        sortable="memberRefMoney"
      >
        <template slot="header" slot-scope="scope">
          <span
            >会员退款总金额
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="已退款订单金额"
            >
              <el-button @click.stop slot="reference" style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="memberPerPayMoney"
        label="会员人均付款金额（元）"
        width="200"
        align="center"
        sortable="memberPerPayMoney"
      >
        <template slot="header" slot-scope="scope">
          <span
            >会员人均付款金额（元）
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="会员付款总金额/付费会员总人数"
            >
              <el-button slot="reference" @click.stop style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="memberPayAmount"
        label="会员成交总金额（元）"
        align="center"
        width="200"
        sortable="memberPayAmount"
      >
        <template slot="header" slot-scope="scope">
          <span
            >会员成交总金额（元）
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="已完成订单金额"
            >
              <el-button slot="reference" @click.stop style="padding:0;border:0"
                ><i class="el-icon-question"></i
              ></el-button>
            </el-popover>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="silverMemberPayAmount"
        label="白银会员成交总金额（元）"
        width="180"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="goldMemberPayAmount"
        label="黄金会员成交总金额（元）"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="diamondMemberPayAmount"
        label="钻石会员成交总金额（元）"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="supremeMemberPayAmount"
        label="至尊会员成交总金额（元）"
        align="center"
        width="180"
      ></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.current"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  queryMemberSalesData,
  queryMemberSalesDataExcel,
} from '@/api/dataReportManage';
import qs from 'qs';
export default {
  data() {
    return {
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      value4: [],
      headers: {
        token: localStorage.getItem('token'), //从cookie里获取token，并赋值  Authorization ，而不是token
      },
      tableData: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      logininfo: '',
      orgList: '',
      formInline: {
        ascs: '',
        descs: '',
        sumSort: '',
        paySort: '',
        refSort: '',
        perSort: '',
        dealSort: '',
      },
      loading: false,
      total: 0,
    };
  },
  mounted() {
    this.logininfo = localStorage.getItem('logininfo');
    this.orgList = JSON.parse(this.logininfo).orgList;
    this.search();
  },
  methods: {
    //排序
    handleSort(val) {
      //排序之前将页码重置为1
      this.listQuery.current = 1;

      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        this.initFormInline();
        if (val.column.sortable == 'memberAmount') {
          this.formInline.sumSort = 1;
        }
        if (val.column.sortable == 'memberPayMoney') {
          this.formInline.paySort = 1;
        }
        if (val.column.sortable == 'memberRefMoney') {
          this.formInline.refSort = 1;
        }
        if (val.column.sortable == 'memberPerPayMoney') {
          this.formInline.perSort = 1;
        }
        if (val.column.sortable == 'memberPayAmount') {
          this.formInline.dealSort = 1;
        }
        this.search();
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        this.initFormInline();
        if (val.column.sortable == 'memberAmount') {
          this.formInline.sumSort = 2;
        }
        if (val.column.sortable == 'memberPayMoney') {
          this.formInline.paySort = 2;
        }
        if (val.column.sortable == 'memberRefMoney') {
          this.formInline.refSort = 2;
        }
        if (val.column.sortable == 'memberPerPayMoney') {
          this.formInline.perSort = 2;
        }
        if (val.column.sortable == 'memberPayAmount') {
          this.formInline.dealSort = 2;
        }
        this.search();
      }
    },
    initFormInline() {
      this.formInline = {
        ascs: '',
        descs: '',
        sumSort: '',
        paySort: '',
        refSort: '',
        perSort: '',
        dealSort: '',
      };
    },
    // 重置页码查询 查询
    searchData() {
      this.listQuery.current = 1;
      this.search();
    },
    //查询
    search() {
      this.loading = true;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          beginDate: this.value4.length == 0 ? '' : this.value4[0],
          endDate: this.value4.length == 0 ? '' : this.value4[1],
          orgSeq: this.orgList[0].orgSeq,
          sumSort: this.formInline.sumSort,
          paySort: this.formInline.paySort,
          refSort: this.formInline.refSort,
          perSort: this.formInline.perSort,
          dealSort: this.formInline.dealSort,
        },
        ascs: this.formInline.ascs,
        descs: this.formInline.descs,
      };
      queryMemberSalesData(data).then((res) => {
        this.total = res.total;
        this.tableData = res.records;
        this.loading = false;
      });
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.search();
    },
    //导出
    exportExcel() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          beginDate: this.value4.length == 0 ? '' : this.value4[0],
          endDate: this.value4.length == 0 ? '' : this.value4[1],
          orgSeq: this.orgList[0].orgSeq,
          sumSort: this.formInline.sumSort,
          paySort: this.formInline.paySort,
          refSort: this.formInline.refSort,
          perSort: this.formInline.perSort,
          dealSort: this.formInline.dealSort,
        },
        ascs: this.formInline.ascs,
        descs: this.formInline.descs,
      };
      queryMemberSalesDataExcel(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel',
          });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download =
            '大区会员销售报表（' + this.orgList[0].orgName + '）.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    kong() {
      this.value4 = '';
    },
  },
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.el-form-item .el-select {
  width: 100%;
}
</style>
